<template>
  <main>
    <el-form :model="fromData" :rules="fromData_rules" ref="fromDataRef" label-width="100px">
      <!-- 小组名称定义 -->
      <el-form-item label="小组名称" prop="name">
        <el-input v-model="fromData.name" :readonly="!set"></el-input>
      </el-form-item>
      <!-- 小组组长选择 -->
      <el-form-item label="小组组长" prop="groupLeader">
        <!-- iSelectedStaff 是一个多次调用的组件 -->
        <div class="w100 flex_sb">
          <div class="w100 flex_1 padding_right">
            <iSelectedStaff v-if="set" :defaultSelect="catchArray.groupLeaderData" :checkbox="false" @selectChange="zz_selectChange">
              <div class="_tag _tag_default" v-if="catchArray.groupLeaderData">
                {{ catchArray.groupLeaderData.name }}
              </div>
              <div class="_tag _tag_default" v-else>无组长</div>
            </iSelectedStaff>
            <div class="w100" v-else>
              <div class="_tag _tag_default" v-if="catchArray.groupLeaderData">
                {{ catchArray.groupLeaderData.name }}
              </div>
              <div class="_tag _tag_default" v-else>无组长</div>
            </div>
          </div>
        </div>
      </el-form-item>
      <!-- 小组副组长选择 -->
      <el-form-item label="小组副组长" prop="deputyGroupLeader">
        <div class="w100 flex_sb">
          <div class="flex_1 flex_start padding_right tag_box_box w100">
            <iSelectedStaff v-if="set" class="w100" :defaultSelect="catchArray.deputyGroupLeaderData" :checkbox="true" @selectChange="fzz_selectChange">
              <div class="tag_box w100" v-if="catchArray.deputyGroupLeaderData&&catchArray.deputyGroupLeaderData.length">
                <el-tag type="success" style="margin-right:10px" v-for="item in catchArray.deputyGroupLeaderData" :key="item.id">{{ item.name }}</el-tag>
              </div>
              <div v-else class="_tag _tag_success">无副组长</div>
            </iSelectedStaff>
            <div class="w100" v-else>

              <div class="tag_box w100" v-if="catchArray.deputyGroupLeaderData&&catchArray.deputyGroupLeaderData.length">
                <el-tag type="success" style="margin-right:10px" v-for="item in catchArray.deputyGroupLeaderData" :key="item.id">{{ item.name }}</el-tag>
              </div>
              <div v-else class="_tag _tag_success">无副组长</div>
            </div>
          </div>
        </div>
      </el-form-item>
      <!-- 小组成员配置 -->
      <el-form-item label="组员配置" prop="userIdList">
        <div class="w100 flex_sb">
          <div class="flex_1 w100 flex_start padding_right tag_box_box">
            <iSelectedStaff v-if="set" class="w100" :defaultSelect="catchArray.userIdListData" :checkbox="true" @selectChange="zy_selectChange">
              <div class="tag_box w100" v-if="catchArray.userIdListData&&catchArray.userIdListData.length">
                <el-tag type="info" v-for="item in catchArray.userIdListData" :key="item.id">{{ item.name }}</el-tag>
              </div>
              <div v-else class="_tag _tag_info">无组员</div>
            </iSelectedStaff>

            <div class="w100" v-else>
              <div class="tag_box w100" v-if="catchArray.userIdListData&&catchArray.userIdListData.length">
                <el-tag type="info" v-for="item in catchArray.userIdListData" :key="item.id">{{ item.name }}</el-tag>
              </div>
              <div v-else class="_tag _tag_info">无组员</div>
            </div>
          </div>
        </div>
      </el-form-item>

      <!-- 预警成员配置 -->
      <el-form-item label="预警成员配置" prop="userIdList">
        <div class="w100 flex_sb">
          <div class="flex_1 w100 flex_start padding_right tag_box_box">
            <iSelectedStaff v-if="set" class="w100" :defaultSelect="catchArray.earlyWarningIdListData" :checkbox="true" @selectChange="yjcy_selectChange">
              <div class="tag_box w100" v-if="catchArray.earlyWarningIdListData&&catchArray.earlyWarningIdListData.length">
                <el-tag type="info" v-for="item in catchArray.earlyWarningIdListData" :key="item.id">{{ item.name }}</el-tag>
              </div>
              <div v-else class="_tag _tag_info">无预警成员</div>
            </iSelectedStaff>
            <div class="w100" v-else>
              <div class="tag_box w100" v-if="catchArray.earlyWarningIdListData&&catchArray.earlyWarningIdListData.length">
                <el-tag type="info" v-for="item in catchArray.earlyWarningIdListData" :key="item.id">{{ item.name }}</el-tag>
              </div>
              <div v-else class="_tag _tag_info">无预警成员</div>
            </div>
          </div>
        </div>
      </el-form-item>

      <!-- 小组设备配置 -->
      <el-form-item label="设备配置" prop="deviceIdList">
        <div class="w100 flex_sb">
          <div class="flex_1 w100 flex_start padding_right tag_box_box">
            <iSelectedDevice v-if="set" class="w100" :groupId="fromData.id" :defaultSelect="catchArray.deviceIdListData" :checkbox="true" @selectChange="sb_selectChange">
              <div class="tag_box w100" v-if="catchArray.deviceIdListData&&catchArray.deviceIdListData.length">
                <el-table :data="catchArray.deviceIdListData" style="width: 100%;max-height:200px;overflow-y:auto">
                  <el-table-column v-if="catchArray.deviceIdListData[0].deviceName" prop="deviceName">
                  </el-table-column>
                  <el-table-column label="规格型号" prop="specificationsModel">
                  </el-table-column>
                </el-table>
              </div>
              <div v-else class="_tag _tag_info">无设备</div>
            </iSelectedDevice>
            <div class="w100" v-else>
              <div class="tag_box w100" v-if="catchArray.deviceIdListData&&catchArray.deviceIdListData.length">
                <el-table :data="catchArray.deviceIdListData" style="width: 100%;max-height:200px;overflow-y:auto">
                  <el-table-column v-if="catchArray.deviceIdListData[0].deviceName" prop="deviceName">
                  </el-table-column>
                  <el-table-column label="规格型号" prop="specificationsModel">
                  </el-table-column>
                </el-table>
              </div>
              <div v-else class="_tag _tag_info">无设备</div>
            </div>
          </div>
        </div>
      </el-form-item>
      <!-- 小组描述填写 -->
      <el-form-item label="小组描述" prop="remark">
        <el-input type="textarea" :readonly="!set" v-model="fromData.remark"></el-input>
      </el-form-item>
    </el-form>
  </main>
</template>

<script>
export default {
  props: {
    fromData: {},
    set: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 设备,
      fromData_rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'change' }],
        groupLeader: [{ required: true, message: '请选择小组组长', trigger: 'change' }]
      },
      catchArray: {
        groupLeaderData: null,
        deputyGroupLeaderData: null,
        userIdListData: null,
        deviceIdListData: null,
        earlyWarningIdListData: null
      }
    }
  },
  mounted() {
    Object.keys(this.catchArray).forEach(item => {
      this.catchArray[item] = null
    })
  },
  methods: {
    validate() {
      let res_bool = false
      this.$refs.fromDataRef.validate(bool => {
        res_bool = bool
      })
      return res_bool
    },
    resetFields() {
      this.$refs.fromDataRef.resetFields()
    },
    // 组长选中改变
    zz_selectChange(selected) {
      this.catchArray.groupLeaderData = selected
      this.fromData.groupLeader = selected.id
    },
    // 副组长选中改变
    fzz_selectChange(selected) {
      this.catchArray.deputyGroupLeaderData = selected
      this.fromData.deputyGroupLeader = selected.map(item => {
        return item.id
      })
    },
    // 组员选中改变
    zy_selectChange(selected) {
      this.catchArray.userIdListData = selected
      this.fromData.userIdList = selected.map(item => {
        return item.id
      })
    },
    yjcy_selectChange(selected) {
      this.catchArray.earlyWarningIdListData = selected
      this.fromData.earlyWarningIdList = selected.map(item => {
        return item.id
      })
    },
    // 设备选中改变
    sb_selectChange(selected) {
      this.catchArray.deviceIdListData = selected
      this.fromData.deviceIdList = selected.map(item => {
        return item.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
._tag {
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  border: 1px solid;
  border-radius: 4px;
  white-space: nowrap;
  padding: 0 10px;
}
.padding_right {
  padding: 0;
  padding-right: 20px;
}
._tag_default {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}
._tag_success {
  color: #67c23a;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}
._tag_info {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
}
.tag_box_box {
  overflow-x: auto;
  overflow-y: hidden;
  .tag_box {
    display: flex;
    .el-tag {
      margin-right: 10px !important;
    }
  }
}
</style>